<template>
  <view class="container">
    <!-- 顶部图片 -->
    <view class="top-box">
      <image class="top-image" src="/static/images/login-head.png" mode="aspectFill"></image>
      <text class="top-txt">您好，\n欢迎使用</text>
    </view>
    
    <!-- 白色背景内容区域 -->
    <view class="content-wrapper">
      <!-- 账号输入栏 -->
      <view class="input-wrapper">
        <image class="input-icon" src="/static/images/login-user.png" mode="aspectFit"></image>
        <input class="input-field" placeholder="请输入账号" placeholder-style="color: #CCCCCC; font-size: 16px;" v-model="username" />
      </view>
      
      <!-- 密码输入栏 -->
      <view class="input-wrapper">
        <image class="input-icon" src="/static/images/login-psw.png" mode="aspectFit"></image>
        <input class="input-field" placeholder="请输入密码" placeholder-style="color: #CCCCCC; font-size: 16px;" :password="passwordHidden" v-model="password" />
        <!-- 显示/隐藏密码图标 -->
        <image class="toggle-password-icon" :src="passwordVisibleIcon" mode="aspectFit" @click="togglePasswordVisibility"></image>
      </view>
      
      <!-- 登录按钮 -->
      <view class="login-button" @click="handleLogin">
        <text class="login-button-text">登录</text>
      </view>
      <!-- 注册按钮 -->
      <!-- <view class="regist-button">
        <text class="regist-button-text" @click="handleRegist">快速注册</text>
      </view> -->
    </view>
  </view>
</template>

<script >
import { login } from '@/api/auth.js'

export default {
  data() {
    return {
      username: '', // 用户名
      password: '', // 密码
      passwordHidden: true, // 初始密码是隐藏的
      passwordVisibleIcon: '/static/images/login-psw-hidden.png' // 初始显示隐藏图标
    }
  },
  methods: {
    togglePasswordVisibility() {
      this.passwordHidden = !this.passwordHidden;
      this.passwordVisibleIcon = this.passwordHidden 
        ? '/static/images/login-psw-hidden.png' 
        : '/static/images/login-psw-show.png';
    },
    async handleLogin() {
      if (!this.username || !this.password) {
        uni.showToast({ title: '请输入账号和密码', icon: 'none' })
        return
      }
      try {
        const res = await login({ username: this.username, password: this.password })
        console.log('res--', res)
        // 保存返回的数据（可按需调整 key）
        uni.setStorageSync('userInfo', res)
        // 如后端携带 token，可在此一起保存
        uni.setStorageSync('token', res.token)
        // uni.showToast({ title: '登录成功', icon: 'success' })
        // 跳转到首页
        uni.reLaunch({ url: '/pages/index/index' })
      } catch (e) {
        // 错误提示在 request 封装里已有，这里可选
      }
    },
    handleRegist() {

    }
  }
}
</script>

<style lang="scss">
.container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.top-box {
  width: 100%;
  height: 680rpx;
  display: block;
  position: relative;
  .top-image{
    width: 100%;
    height: 680rpx;
    display: block;
  }
  .top-txt{
    position: absolute;
    bottom: 96rpx;
    left: 64rpx;
    color: #202844;
    font-weight: 600;
    font-size: 64rpx;
    font-family: PingFang SC;
  }
}

.content-wrapper {
  width: 100%;
  height: calc(100vh - 632rpx);
  background-color: #ffffff;
  border-top-left-radius: 48rpx;
  border-top-right-radius: 48rpx;
  margin-top: -48rpx;
  padding-top: 96rpx;
  padding-left: 64rpx;
  padding-right: 64rpx;
  position: relative;
  z-index: 1;
}

.input-wrapper {
  width: 100%;
  height: 96rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #F7F7F7;
  border-radius: 24rpx;
  padding: 0 32rpx;
  margin-bottom: 40rpx;
  box-sizing: border-box;
}

.input-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
  display: block;
}

.input-field {
  flex: 1;
  font-size: 32rpx;
  color: #333333;
  background-color: transparent;
  border: none;
  outline: none;
  height: 100%;
  line-height: 1;
}

.toggle-password-icon {
  width: 48rpx;
  height: 48rpx;
  margin-left: 20rpx;
  flex-shrink: 0;
  display: block;
  cursor: pointer;
}

.login-button {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(270deg, #4677F4 0%, #7FA2FC 100%);
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40rpx;
  cursor: pointer;
  margin-bottom: 40rpx;
}

.login-button-text {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 500;
}

.regist-button {
  width: 100%;
  height: 96rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40rpx;
  cursor: pointer;
  margin-bottom: 40rpx;
}

.regist-button-text {
  color: #315BF4;
  font-size: 32rpx;
}
</style>
